{% extends "SalarySysMenu/Main.html" %}
{% load staticfiles %}

{% block CSSAnotherhead %}
<link rel="stylesheet" href="{% static 'plugins/timepicker/bootstrap-timepicker.min.css'%}">
<link rel="stylesheet" href="{% static 'bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css'%}">
{% endblock %}
{% block bodyhead %}

<body class="hold-transition skin-purple-light sidebar-mini" onload="initPage()">

  {% endblock %}
  {% block MyReport %}
  <li class="active treeview">
    <a href="#">
      <i class="fa fa-hand-paper-o"></i>
      <span> 业务申报登记</span>
      <span class="pull-right-container">
        <i class="fa fa-angle-left pull-right"></i>
      </span>
    </a>
    <ul class="treeview-menu">
      <li><a href="{% url 'GZGL:ReportWorking' %}"><i class="fa  fa-circle-o"></i> <span> 业绩申报</span></a></li>
      <li class="active"><a href="{% url 'GZGL:ReportSalary' %}"><i class="fa fa-circle-o"></i> 工资异常申报</a></li>
      <li><a href="#mysign"><i class="fa fa-circle-o"></i> 考勤异常申报</a></li>
      <li><a href="{% url 'GZGL:ReportOther' %}"><i class="fa fa-circle-o"></i> 其他异常申报</a></li>
    </ul>
  </li>
  {% endblock %}
  {% block content %}
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        业务申报
        <small>工资异常申报</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
      </ol>

    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        | Your Page Content Here |
        -------------------------->
      <div class="col-md-8">
        <!-- general form elements -->
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">业务申报单（工资异常单）</h3>
          </div>
          <!-- /.box-header -->
          <!-- form start -->
          <form role="form" method="POST">{% csrf_token %}
            <input type="hidden" name="showtype" id="exampleID" value="new">
            <div class="box-body">
              <div class="form-group col-xs-6">
                <label for="exampleID">业务申报类型</label>

                <input type="text" class="form-control" id="exampleID" value="工资异常申报" disabled>
                <input type="hidden" name="type" class="form-control" id="exampleID" value="工资异常申报">
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleID">您的员工ID</label>

                <input type="text" name="reportid" class="form-control" id="exampleID" placeholder="您的员工ID"
                  value="{{here.staff_id}}" required>
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleInputname">您的姓名</label>
                <input type="text" name="reportname" class="form-control" id="examplename" placeholder="您的姓名"
                  value="{{here.staff_name}}" required>
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleChargeman">工资异常类型</label>
                <select name="reportdetailtype" class="form-control">
                  <option value="基本工资异常">基本工资异常</option>
                  <option value="考勤工资异常">考勤工资异常</option>
                  <option value="全勤奖异常">全勤奖异常</option>
                  <option value="提成与补助异常">提成与补助异常</option>
                  <option value="五险一金代缴异常">五险一金代缴异常</option>
                  <option value="个人所得税扣除异常">个人所得税扣除异常</option>
                  <option value="其他扣款异常">其他扣款异常</option>

                </select>
              </div>

              <div class="form-group col-xs-6">
                <label for="inputBirthday">工资异常月份</label>
                <div class="input-group date">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" name="reportmonth" class="form-control pull-right" value="" placeholder="工资异常月份"
                    data-inputmask='"mask": "9999/99"' data-mask>
                </div>
              </div>
              <div class="form-group col-xs-6">
                <label for="exampleInputname">异常工资金额</label>
                <div class="input-group">
                  <span class="input-group-addon"><i class="fa fa-rmb"></i></span>
                  <input type="text" name="reportmoney" class="form-control" id="examplename" placeholder="涉及金额"
                    required>
                  <span class="input-group-addon">元</span>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label>工资异常原因描述</label>
                <textarea class="form-control" rows="3" name="details" required></textarea>
              </div>
              <div class="form-group col-xs-12">
                <label>备 注</label>
                <textarea class="form-control" rows="3" name="backup"></textarea>
              </div>



            </div>
            <!-- /.box-body -->

            <div class="box-footer">
              <button type="reset" class="btn btn-default">重置</button>
              <button type="submit" class="btn btn-primary pull-right">提交</button>
            </div>
          </form>
        </div>
        <!-- /.box -->
      </div>
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  {% endblock %}

  {% block JSFile %}

  <!-- jQuery 3 -->
  <script src="{% static 'bower_components/jquery/dist/jquery.min.js'%}" type="text/javascript"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="{% static 'bower_components/bootstrap/dist/js/bootstrap.min.js'%}" type="text/javascript"></script>
  <script src="{% static 'bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js'%}"></script>
  <!-- AdminLTE App -->
  <script src="{% static 'dist/js/adminlte.min.js'%}" type="text/javascript"></script>
  <script src="{% static 'plugins/input-mask/jquery.inputmask.js'%}"></script>
  <script src="{% static 'plugins/timepicker/bootstrap-timepicker.min.js'%}"></script>


  <script src="{% static 'bower_components/bootstrap-daterangepicker/daterangepicker.js'%}"></script>
  <script src="{% static 'js/remodal.js'%}" type="text/javascript"></script>


  <!-- Optionally, you can add Slimscroll and FastClick plugins.
      Both of these plugins are recommended to enhance the
      user experience. -->
  <script>

    $(function () {
      //Initialize Select2 Elements


      //Datemask dd/mm/yyyy
      $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })

      //Money Euro
      $('[data-mask]').inputmask()

      //Date picker
      $('#datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true

      })


    })
  </script>
  <script>
    $(document).on('opening', '.remodal', function () {
      console.log('opening');
    });

    $(document).on('opened', '.remodal', function () {
      console.log('opened');
    });

    $(document).on('closing', '.remodal', function (e) {
      console.log('closing' + (e.reason ? ', reason: ' + e.reason : ''));
    });

    $(document).on('closed', '.remodal', function (e) {
      console.log('closed' + (e.reason ? ', reason: ' + e.reason : ''));
    });

    $(document).on('confirmation', '.remodal', function () {
      console.log('confirmation');
    });

    $(document).on('cancellation', '.remodal', function () {
      console.log('cancellation');
    });

  </script>
  {% endblock %}